<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选练习</title>
		<script type="text/javascript">
			window.onload = function(){
				// 获取四个多选框items
				var items = document.getElementsByName("items");
				// 获取全选/全不选的多选框
				var checkedAllBox = document.getElementById("checkedAllBox");
				
				// 全选按钮 点击按钮以后,四个多选框全都被选中
				// 1.#checkedAllBtn
				// 为id为checkedAllBtn的按钮绑定一个单机响应函数
				var checkedAllBtn = document.getElementById("checkedAllBtn");
				checkedAllBtn.onclick = function(){				
					// 遍历items
					for(var i=0;i<items.length;i++){
						// 通过多选框的checked属性可以来获取或者设置多选框的选中状态
						// alert(items[i].checked);
						// 设置四个多选框变成选中状态
						items[i].checked = true;
					}
					
					// 将全选/全不选设置为选中
					checkedAllBox.checked = true;
				};
				
				// 全不选按钮 点击按钮以后,四个多选框都变成没选中
				// 2.#checkedNoBtn
				// 为id为checkedNoBtn的按钮绑定一个单机响应函数
				var checkedNoBtn = document.getElementById("checkedNoBtn");
				checkedNoBtn.onclick = function(){
					for(var i=0;i<items.length;i++){
						// 设置四个多选框设置为没选择状态
						items[i].checked = false;
					}
					// 将全选/全不选设置为不选中
					checkedAllBox.checked = false;
				};
				
				// 反选按钮 点击按钮以后,选中的变成没选中,没选中的变成选中
				// 3.#checkedRevBtn
				var checkedRevBtn = document.getElementById("checkedRevBtn");
				checkedRevBtn.onclick = function(){		
					// 将checkedAllBox设置为选中状态
					checkedAllBox.checked = true;
					
					for(var i=0;i<items.length;i++){
						// 判断多选框状态
						// if(items[i].checked){
						// 	// 证明多选框已选中,则设置为没选中状态
						// 	items[i].checked = false;
						// }else{
						// 	// 证明多选框没选中,则设置为选中状态
						// 	items[i].checked = true;
						// }						
						items[i].checked = !items[i].checked;
						
						// 判断四个多选框是否全选
						// 只要有一个没选中则就不是全选
						if(!items[i].checked){
							// 一旦进入判断,则证明不是全选状态
							// 将checkedAllBox设置为没选中状态
							checkedAllBox.checked = false;
						}
					}			
				};
				
				// 提交按钮 点击按钮以后,将所有选中的多选框value属性值弹出
				// 4.#sendBtn
				var sendBtn = document.getElementById("sendBtn");
				sendBtn.onclick = function(){
					// 遍历items
					for(var i=0;i<items.length;i++){
						// 判断多选框是否选中
						if(items[i].checked){
							alert(items[i].value);
						}
					}
				};
				
				// 5.#checkedAllBox
				// 全选/全不选 多选框
				// 当它选中时,其余的也选中,当它取消时其余的也取消				
				// 在事件的响应函数中,响应函数是给谁绑定的this就是谁				
				// 为checkedAllBox绑定单机响应函数
				checkedAllBox.onclick = function(){
					// 设置多选框的选中状态
					for(var i=0;i<items.length;i++){
						// items[i].checked = checkedAllBox.checked
						items[i].checked = this.checked
					}
				};
				
				// 如果四个多选框全都选中,则checkAllBox也应该选中
				// 如果四个多选框没都选中,则checkAllBox也不应该选中
				
				// 为四个多选框分别绑定点击响应函数
				for(var i=0;i<items.length;i++){
					items[i].onclick = function(){
						// 将checkedAllBox设置为选中状态
						checkedAllBox.checked = true;
						
						for(var j=0;j<items.length;j++){
							// 判断四个多选框是否全选
							// 只要有一个没选中则就不是全选
							if(!items[j].checked){
								// 一旦进入判断,则证明不是全选状态
								// 将checkedAllBox设置为没选中状态
								checkedAllBox.checked = false;
								
								// 一旦进入判断,则已经得出结果,不用再继续执行循环
								break;
							}
						}					
					};
				};
				
			}
			
		</script>
	</head>
	<body>
		<form method="post" action="">
			你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选
			<br />
			<input type="checkbox" name="items" value="足球" />足球
			<input type="checkbox" name="items" value="蓝球" />蓝球
			<input type="checkbox" name="items" value="羽毛球" />羽毛球
			<input type="checkbox" name="items" value="乒乓球" />乒乓球
			<br />
			<input type="button" id="checkedAllBtn" value="全  选" />
			<input type="button" id="checkedNoBtn" value="全不选" />
			<input type="button" id="checkedRevBtn" value="反  选" />
			<input type="button" id="sendBtn" value="提  交" />
			
		</form>		
	</body>
</html>
